<template>
  <div class="listen">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        :placeholder="keyWorlds"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" @change="sales" :options="option1" />
      <van-dropdown-item v-model="value2" @change="change"  :options="option2" />
      <van-dropdown-item v-model="value3" :options="option3" />
    </van-dropdown-menu>
    <ProList :list="proList"></ProList>
  </div>
</template>

<script>
import Vue from 'vue'
import {
  Toast,
  Search,
  Sidebar,
  SidebarItem,
  DropdownMenu,
  DropdownItem,
  Grid,
  GridItem
} from 'vant'
// import { getList } from '../../api/Search'
import { getList } from '@/api/Search'
import ProList from '@/components/ProList'

Vue.use(Toast)
Vue.use(Search)
Vue.use(Sidebar)
Vue.use(SidebarItem)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Grid)
Vue.use(GridItem)
export default {
  name: 'search',
  components: {
    ProList
  },
  data () {
    return {
      proList: [],
      value: '',
      keyWorlds: '手机',
      activeKey: 0,
      value1: 0,
      value2: 'a',
      value3: 'e',
      option1: [
        { text: '全部商品', value: 0 },
        { text: '销量升序', value: 1 },
        { text: '销量降序', value: 2 },
        { text: '其他商品', value: 3 }
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '价格升序', value: 'b' },
        { text: '价格降序', value: 'c' }
      ],
      option3: [
        { text: '筛选', value: 'e' },
        { text: '包邮', value: 'f' },
        { text: '销量最高', value: 'g' },
        { text: '销量排序', value: 'h' }
      ]
    }
  },
  methods: {
    onSearch (val) {
      // Toast(val)
      getList({ keyword: val }).then(res => {
        console.log(res.data)
        this.proList = res.data.data
      })
    },
    onCancel () {
      Toast('取消')
      this.$router.back()
    },
    change (value) {
      console.log(value)
      switch (value) {
        case 'b':
          this.proList.sort((a, b) => {
            return a.originprice - b.originprice
          })
          break
        case 'c':
          this.proList.sort((a, b) => {
            return b.originprice - a.originprice
          })
          break
      }
    },
    sales (value) {
      console.log(value)
      switch (value) {
        case 1:
          this.proList.sort((a, b) => {
            return a.sales - b.sales
          })
          break
        case 2:
          this.proList.sort((a, b) => {
            return b.sales - a.sales
          })
          break
      }
    }
  },
  mounted () {
    if (localStorage.getItem('Kind') === null) {
      getList({ keyword: this.keyWorlds }).then(res => {
        console.log(res.data)
        this.proList = res.data.data
      })
    } else {
      this.keyWorlds = localStorage.getItem('Kind')
      console.log(this.keyWorlds)
      getList({ keyword: localStorage.getItem('Kind') }).then(res => {
        this.proList = res.data.data
      })
      localStorage.removeItem('Kind')
    }
  }
}
</script>

<style scoped>

</style>
